<template>
	<!--二维码分享 2024年11月28日 09:21:01 by gongxiaohui -->
	<view class="container">
		<loading />
		<canvas style="width: 750rpx; height: 100vh;margin:0;padding:0" canvas-id="myCanvas" id="myCanvas"></canvas>
	</view>
</template>

<script>
	import {
		ossUrl,
		rpxToPx
	} from '../../utils/tools'
	import txEmpty from "@/static/home/tx-empty.png"
	const app = getApp();
	export default {
		props: ['userInfo', 'appName', 'logoImg', 'qrcode', 'roleCode'],
		data() {
			return {
				ossUrl,
				ctx: null,
				screenHeight: 0
			}
		},
		watch: {
			qrcode: {
				immediate: true,
				handler() {
					this.init()
				}
			}
		},
		methods: {
			async init() {
				const {
					screenHeight
				} = await uni.getSystemInfo()
				this.screenHeight = screenHeight;
				const ctx = uni.createCanvasContext('myCanvas')
				this.ctx = ctx;

				// 背景
				this.drawImage({
					ctx,
					imgPath: ossUrl + '/system/qrcode/qrcode-bg.png',
					width: rpxToPx(750),
					height: this.screenHeight,
				})
				// 白底
				this.drawRoundedWhiteRectangle({
					ctx,
					width: rpxToPx(654),
					height: rpxToPx(840),
					radius: rpxToPx(16),
					x: rpxToPx(48),
					y: this.screenHeight / 2 - rpxToPx(450)
				})

				// 头像底
				this.drawRoundedWhiteRectangle({
					ctx,
					width: rpxToPx(166),
					height: rpxToPx(166),
					radius: rpxToPx(85),
					x: rpxToPx(293),
					y: this.screenHeight / 2 - rpxToPx(538),
				})

				// 头像
				const txImg = this.userInfo.headUrl ? (this.userInfo?.headUrl?.includes('http') ? txEmpty : ossUrl + this
					.userInfo.headUrl) : txEmpty;
				this.drawRoundedImage({
					ctx,
					imgPath: txImg,
					width: rpxToPx(150),
					height: rpxToPx(150),
					x: rpxToPx(301),
					y: this.screenHeight / 2 - rpxToPx(530),
					radius: rpxToPx(75),
				})

				// 名字
				const text = (this.userInfo.realName || '') + (this.roleCode === 'SALESMAN' ? ' 销售' : ' 营养师');
				this.drawText({
					ctx,
					text,
					fontSize: rpxToPx(32),
					y: this.screenHeight / 2 - rpxToPx(320),
					color: '#000',
					bold: true
				})

				// 说明
				const desctext = `您好，我在${this.appName}APP，为您提供专属服务`
				this.drawText({
					ctx,
					text: desctext,
					fontSize: rpxToPx(24),
					y: this.screenHeight / 2 - rpxToPx(260),
					color: '#333',
				})

				// 二维码背景
				this.drawImage({
					ctx,
					imgPath: ossUrl + '/system/qrcode/qrcode-line-bg.png',
					width: rpxToPx(380),
					height: rpxToPx(380),
					x: rpxToPx(185),
					y: this.screenHeight / 2 - rpxToPx(200),
				})

				// 二维码
				this.drawImage({
					ctx,
					imgPath: ossUrl + this.qrcode,
					width: rpxToPx(340),
					height: rpxToPx(340),
					x: rpxToPx(205),
					y: this.screenHeight / 2 - rpxToPx(180),
				})

				// logo
				const that = this;
				uni.getImageInfo({
					src: app.globalData.logo180x72,
					success(image) {
						const height = rpxToPx(72);
						const width = image.width / image.height * height
						that.drawImage({
							ctx,
							imgPath: image.path,
							width,
							height,
							x: rpxToPx(375) - width / 2,
							y: that.screenHeight / 2 + rpxToPx(240),
						})
						ctx.draw();
					},
					complete() {
						that.$emit('complete')
					}
				});
			},
			// 绘制带圆角的白底
			drawRoundedWhiteRectangle({
				ctx,
				x = 0,
				y = 0,
				width,
				height,
				radius
			}) {
				ctx.save(); // 保存当前画布状态
				// 开始一个新的路径
				ctx.beginPath();

				// 绘制左上角圆角，注意要加上 x 和 y 坐标偏移
				ctx.moveTo(x + radius, y);
				ctx.arcTo(x + width, y, x + width, y + radius, radius);

				// 绘制顶部直线到右上角（但使用 arcTo 已经包含了这部分，所以不需要 lineTo）

				// 绘制右上角到右下角（但同样，arcTo 会处理这部分的曲线）
				ctx.arcTo(x + width, y + height, x + radius, y + height, radius);

				// 绘制右下角到左下角
				ctx.lineTo(x, y + height - radius);

				// 绘制左下角圆角
				ctx.arcTo(x, y + radius, x + radius, y, radius);

				// 关闭路径（虽然 arcTo 已经隐式地关闭了直线路径的部分，但明确调用 closePath 是个好习惯）
				ctx.closePath();

				// 但是上面的 arcTo 使用方式其实并不正确，因为它需要两个直线段来定义曲线的切线。
				// 更简单且正确的方法是直接使用 arc 方法来绘制每个圆角，并用 lineTo 连接它们。
				// 下面是使用 arc 方法的正确实现：

				// 重新开始路径并正确绘制圆角矩形
				ctx.beginPath();

				// 左上角圆角
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5, false);
				ctx.lineTo(x + width - radius, y); // 顶部直线

				// 右上角圆角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2, false);
				ctx.lineTo(x + width, y + height - radius); // 右侧直线

				// 右下角圆角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5, false);
				ctx.lineTo(x + radius, y + height); // 底部直线

				// 左下角圆角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI, false);
				ctx.lineTo(x, y + radius); // 回到起始点左侧的直线（但实际上 closePath 会自动完成这一步）

				// 但由于我们已经从左上角开始并顺时针绘制到了左上角的前一点（只差闭合），所以直接 closePath 更简单
				ctx.closePath();

				// 设置填充颜色为白色
				ctx.setFillStyle('white');

				// 填充路径
				ctx.fill();
				ctx.restore();
			},
			// 绘制图片
			drawImage({
				ctx,
				imgPath,
				x = 0,
				y = 0,
				width,
				height,
			}) {
				ctx.save(); // 保存当前画布状态
				// 绘制图片
				ctx.drawImage(imgPath, x, y, width, height); // 在 canvas 上绘制图片，参数为图片路径、起始 x 坐标、起始 y 坐标、图片宽度、图片高度
				ctx.restore();
			},
			// 绘制文字
			drawText({
				ctx,
				text,
				fontSize,
				y,
				bold = false,
				color = '#333',
			}) {
				ctx.save(); // 保存当前画布状态
				// 绘制文字
				ctx.setFontSize(fontSize); // 设置字体大小
				bold && ctx.setFontWeight && ctx.setFontWeight('bold');
				ctx.setFillStyle(color); // 设置字体颜色
				ctx.setTextAlign && ctx.setTextAlign('center');
				ctx.setTextBaseline && ctx.setTextBaseline('middle');
				const x = rpxToPx(375);
				ctx.fillText(text, x, y); // 在 canvas 上绘制文字，参数为文字内容、起始 x 坐标、起始 y 坐标
				// 绘制完成后恢复画布状态
				ctx.restore();
			},
			// 绘制圆角图片
			drawRoundedImage({
				ctx,
				imgPath,
				x = 0,
				y = 0,
				width,
				height,
				radius
			}) {
				// 绘制圆角矩形的路径并裁剪
				ctx.save();
				ctx.beginPath();
				// 左上角
				ctx.moveTo(x + radius, y);
				ctx.arc(x + radius, y + radius, radius, Math.PI, 1.5 * Math.PI, false);
				// 右上角
				ctx.lineTo(x + width - radius, y);
				ctx.arc(x + width - radius, y + radius, radius, 1.5 * Math.PI, 2 * Math.PI, false);
				// 右下角
				ctx.lineTo(x + width, y + height - radius);
				ctx.arc(x + width - radius, y + height - radius, radius, 0, 0.5 * Math.PI, false);
				// 左下角
				ctx.lineTo(x + radius, y + height);
				ctx.arc(x + radius, y + height - radius, radius, 0.5 * Math.PI, Math.PI, false);
				ctx.closePath();
				ctx.clip();

				// 加载图片并绘制
				ctx.drawImage(imgPath, x, y, width, height);
				ctx.restore();
			},

			saveImage() {
				uni.showLoading({
					title: 'Loading...',
					mask: true
				})

				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						console.log('图片路径：', tempFilePath);

						// 这里你可以选择将图片保存到相册或显示在页面上
						// 保存到相册（需要用户授权）
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: () => {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success'
								})
								uni.hideLoading()
							},
							fail: ({
								errMsg
							}) => {
								console.error('保存图片到相册失败：', errMsg);
								uni.showToast({
									title: '保存失败:' + errMsg,
									icon: 'none'
								})
								uni.hideLoading()
							}
						});
					},
					fail: ({
						errMsg
					}) => {
						uni.showToast({
							title: '保存失败:' + errMsg,
							icon: 'none'
						})
						uni.hideLoading()
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0;
		margin: 0;
	}
</style>